<template>
  <div class="index_home">
    <!-- 头部logo和搜索 -->
    <div class="header">
      <header-search></header-search>
    </div>

    <van-tabs v-model="active" 
   
    @click="goLink" line-width="18px" ref="tabBox">
      <van-tab
        v-for="item,index in tabList"
        :key="index"
        :title="item.moduleName"
        :name="item.moduleKey"
      >
        <index-content
          :moduleKey="item.moduleKey"
          :moduleName="item.moduleName"
        ></index-content>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { initHomeData } from "@/request/api.js";
import IndexContent from "@/views/index/IndexContent.vue";
export default {
  name: "Index",
  data() {
    return {
      tabList: [],
      active: "",
      key: "",
    };
  },
  components: {
    IndexContent,
  },
  created() {
    this.initData();
    this.active = this.$route.params.key;
    
  },
  methods: {
    async initData() {
      const { data: res } = await initHomeData();
      this.tabList = res.data;
      for (let i = 0; i < 6; i++) {
        let obj = {
          dataComponentKey: "CategoryModuleData",
          moduleKey: "channel",
          moduleName: "更多",
        };
        
        this.tabList.push(obj);
      }
    },

    goLink(name, title) {
      if (name == "channel") {
        this.$router.push(`/${name}/`);
      } else {
        this.$router.replace("/home/" + this.active);
      }
      document.title = title;
    },
   
  },
  mounted() {
    window.addEventListener("scroll", () => {
      const tabs = document.querySelector(".van-tabs__wrap");

      
      if (window.pageYOffset > 100) {
        // console.log(this.$refs.tabBox.scrollTop)

        tabs.classList.add("up");
      } else {
        tabs.classList.remove("up");
      }
    });

  },
  updated(){
    for(let i = 0 ; i < this.tabList.length;i++){
      if(this.active == this.tabList[i].moduleKey){
        document.title = this.tabList[i].moduleName
        return
      }
    }
  },
  destroyed() {
    window.removeEventListener("scroll", window, true); 
  },
};
</script>

<style lang="scss" scoped>
.index_home {
  padding-top: 50px;
}
/deep/ .van-tabs--line {
  padding-top: 42px;

  .van-tabs__wrap {
    position: fixed;
    z-index: 1000;
    top: 50px;
    left: 0;
    transition: all 0.3s ease;
    border-bottom: 1px solid #e8e8e8;
    .van-tabs__nav {
      .van-tab {
        color: #72727b;
        font-size: 15px;
      }
      .van-tab.van-tab--active {
        font-size: 18px;
        color: #404040;
        font-weight: 500;
      }
    }
  }
  .van-tabs__wrap.up {
    transform: translateY(-50px);
  }
}
.header {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 10000;
  width: 100%;
}
</style>

